<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青春花语--我的订单</title>
    <link rel="stylesheet" href="../CSS/my_order.css">
    <link rel="stylesheet" href="../CSS/public.css">
    <script src="../js/my_order.js"></script>
</head>

<body>
<!-- 头部导航栏 -->
    <header>
        <h1>青春花语</h1>
        <nav>
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="../HTML/shopping_mall.html">商城</a></li>
                <li><a href="../HTML/shoppingcar.html">购物车</a></li>
                <li><a href="../HTML/my_order.html">我的订单</a></li>
                <li><a href="../HTML/contact.html">联系我们</a></li>
                <!-- 如果有用户登录状态，可以在这里显示用户名和登出按钮 -->
            </ul>
        </nav>
    </header>
    <main>
        <h2>我的订单</h2>
<!-- 我的订单 -->
        <section class="order-list">
            <ul>
                <li class="order-item">
                    <div class="order-info">
                        <h3>订单 #11111</h3>
                        <p>商品名称：星光璀璨</p>
                        <p>个数：一束</p>
                        <p>价格：168.68</p>
                        <p>订单日期: 2024-06-15</p>
                        <button class="btn-details" data-order-id="11111">查看详情</button>
                    </div>
                </li>
                <li class="order-item">
                    <div class="order-info">
                        <h3>订单 #22222</h3>
                        <p>商品名称：金色暖阳</p>
                        <p>个数：一束</p>
                        <p>价格：268.68</p>
                        <p>订单日期: 2024-06-16</p>
                        <button class="btn-details" data-order-id="22222">查看详情</button>
                    </div>
                </li>
                <li class="order-item">
                    <div class="order-info">
                        <h3>订单 #33333</h3>
                        <p>商品名称：砥砺前行</p>
                        <p>个数：一束</p>
                        <p>价格：386.68</p>
                        <p>订单日期: 2024-05-15</p>
                        <button class="btn-details" data-order-id="33333">查看详情</button>
                    </div>
                </li>
                <!-- 可以添加更多订单项 -->
            </ul>
        </section>
        <!-- 订单详情弹窗 -->
        <div id="order-details-modal" class="modal">
            <div class="modal-content">
                 <span class="close">&times;</span>    <!--&times;相当于× -->
                <div class="order-details">
                    <img id="product-image" src=""
                     alt="Product Image" width="250px" height="300px">
                    <h3 id="product-name"></h3>
                    <p id="product-price"></p>
                    <p id="product-material"></p>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>版权信息、联系方式等...</p>
    </footer>
</body>

</html>